<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="date">{{ peakTime.peakDay }}</div>
                <div class="time">{{ peakTime.weekday }}{{ peakTime.peakPeriod }}</div>
                <div class="line"></div>
                <div class="weekend">
                    <div class="weekday" :class="peakTime.weekday != '周一' ? '' : 'top'">
                        <div v-if="peakTime.weekday != '周一'"><span>周</span><span>一</span></div>
                        <div class="top-inner" v-else>
                            <span class="week">周</span><span class="number">一</span>
                        </div>
                    </div>
                    <div class="weekday" :class="peakTime.weekday != '周二' ? '' : 'top'">
                        <div v-if="peakTime.weekday != '周二'"><span>周</span><span>二</span></div>
                        <div class="top-inner" v-else>
                            <span class="week">周</span><span class="number">二</span>
                        </div>
                    </div>
                    <div class="weekday" :class="peakTime.weekday != '周三' ? '' : 'top'">
                        <div v-if="peakTime.weekday != '周三'"><span>周</span><span>三</span></div>
                        <div class="top-inner" v-else>
                            <span class="week">周</span><span class="number">三</span>
                        </div>
                    </div>
                    <div class="weekday" :class="peakTime.weekday != '周四' ? '' : 'top'">
                        <div v-if="peakTime.weekday != '周四'"><span>周</span><span>四</span></div>
                        <div class="top-inner" v-else>
                            <span class="week">周</span><span class="number">四</span>
                        </div>
                    </div>
                    <div class="weekday" :class="peakTime.weekday != '周五' ? '' : 'top'">
                        <div v-if="peakTime.weekday != '周五'"><span>周</span><span>五</span></div>
                        <div class="top-inner" v-else>
                            <span class="week">周</span><span class="number">五</span>
                        </div>
                    </div>

                </div>
                <div class="busy"><span>本月在</span>
                    <div class="businest">{{ peakTime.weekday }}</div><span>工作最忙</span>
                </div>
                <div class="flow"><span>在</span><span class="time">{{ peakTime.weekday }}</span><span>时段人员流量最大，</span>
                </div>
                <div class="flow"><span>共计</span><span class="count">{{ peakTime.maxCount }}</span><span>人</span></div>
                <div class="flow">工作压力很大</div>
                <div class="flow">辛苦啦</div>
            </div>
        </div>
    </div>
</template>

<script>
import { flowPeak } from '@/api/statistics';


export default {
    name: "footfallMonth",  //本月人流量巅峰
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            peakTime: {
                peakDay: '',
                peakPeriod: '',
                maxCount: '',
                weekday: ''
            }
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getPeakTime()
        }
    },
    mounted() {

    },
    created() {
        // this.getPeakTime()
    },
    methods: {
        getPeakTime() {
            let query = {
                month: this.nowMonth
            }
            flowPeak(query).then(res => {
                if (res.code === 200) {
                    const dateNumber = res.data.peakDay;
                    const dateStr = dateNumber.toString();
                    const year = dateStr.substring(0, 4);
                    const month = (parseInt(dateStr.substring(4, 6), 10)).toString() // 月份加1
                    const day = parseInt(dateStr.substring(6, 8)).toString()
                    console.log(year, month, day, '年月日');
                    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                    const dayOfWeek = weekDays[new Date(year, month - 1, day).getDay()];
                    this.peakTime.weekday = dayOfWeek;
                    // 拼接成YYYY-MM-DD格式的字符串
                    this.peakTime.peakDay = `${year}-${month}-${day}`
                    this.peakTime.maxCount = res.data.maxCount;
                    this.peakTime.peakPeriod = res.data.peakPeriod.split('-')[0] + '：00-' + res.data.peakPeriod.split('-')[1] + '：00';
                }



            })
        }
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner4.png);
    padding: 240px 68px 0px 68px;
    color: white;
}

.date {
    font-size: 32px;
    letter-spacing: 14px;
    margin-bottom: 30px;
    font-family: "微软雅黑";

}

.time {
    font-size: 32px;
    letter-spacing: 30px;
    margin-bottom: 60px;
    font-family: "微软雅黑";

}

.line {
    height: 1px;
    width: 100%;
    margin-bottom: 46px;
    background-color: white;
}

.weekend {
    display: flex;
    justify-content: center;
    align-items: end;
    margin-bottom: 84px;

    .weekday {
        width: 130px;
        height: 70px;
        background-color: #FFC285;
        border-radius: 8px;
        margin: 0 66px;
        font-size: 38px;
        line-height: 70px;
        text-align: center;
        font-weight: 900;
        font-family: "黑体";
    }

    .top {
        width: 204px;
        height: 110px;
        border-radius: 10px;
        background: url(../../../assets/crown.png) no-repeat 0 0 / cover;
        color: #FFF9BA;
        position: relative;

        // padding-bottom: 20px;
        .top-inner {
            height: 48px;
            width: 204px;
            position: absolute;
            bottom: 18px
        }

        .week {
            margin-right: 26px;
        }

        .number {
            font-size: 48px;
        }
    }
}

.busy {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 30px;
    font-family: "黑体";
    display: flex;
    justify-content: center;
    align-items: start;
    margin-bottom: 40px;

    .businest {
        font-size: 52px;
        color: #C4413C;
        transform: rotate(16deg);
        letter-spacing: 16px;
        margin-top: -22px;
    }
}

.flow {
    margin-bottom: 44px;
    font-size: 38px;
    letter-spacing: 28px;
    font-weight: 500;

    .time {
        color: #FFC285;
        font-family: "微软雅黑";
        font-weight: 600;
    }

    .count {
        color: #58F3FC;
        font-size: 48px;
        font-weight: 900;
        font-family: "微软雅黑";

    }
}
</style>